<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- 放搜索条件 -->

        <el-form :inline="true" :model="surgeryParm" class="demo-form-inline">

          <el-form-item label="手术名">
            <el-input v-model="surgeryParm.siName" placeholder="请输入手术名" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="选择科室">
            <el-select v-model="surgeryParm.siDepartmentId" placeholder="请选择">
              <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id" :label="tde.deName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="surgeryParm.siStatus" placeholder="请选择">
              <el-option value="1" label="上架"></el-option>
              <el-option value="2" label="下架"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryCondition">查询</el-button>
            <el-button type="primary" @click="remove">清空</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-circle-plus-outline" @click="add">添加手术</el-button>

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- 放数据部分 -->
        <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="siName" label="设备名" width="180">
          </el-table-column>
          <el-table-column prop="siPrice" label="设备价格" width="150" align="center">
          </el-table-column>



          <el-table-column prop="siDepartmentId" label="科室" align="center">
            <template slot-scope="scope">
              {{ getDepartmentName(scope.row.siDepartmentId) }}
            </template>
          </el-table-column>
          <el-table-column prop="siStatus" label="设备状态" align="center">
            <template slot-scope="scope">
              <span>
                {{ scope.row.siStatus == "1" ? '上架' : '下架' }}
              </span>
            </template>
          </el-table-column>


          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-edit" @click="upadtePage(scope.row.id)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" style="margin-left: 0;"
                @click="deleteSurgery(scope.row.id)">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <!-- 放分页 -->

        <el-pagination background :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
          @size-change="changeSize" @current-change="changeCurrent" :total="total">
        </el-pagination>
      </el-col>
    </el-row>



    <!-- 放新增界面 -->

    <el-dialog title="添加手术" :visible.sync="surgeryAddVisible">
      <el-form :model="surgery">
        <el-form-item label="设备名">
          <el-input v-model="surgery.siName" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="设备价格">
          <el-input v-model="surgery.siPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="所属科室">
          <el-select v-model="surgery.siDepartmentId" placeholder="请选择所属科室">
            <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id + ''" :label="tde.deName"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="surgeryAddVisible = false, surgery = {}">取 消</el-button>
        <el-button type="primary" @click="addTokenSurgery">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 放修改界面 -->

    <el-dialog title="设备修改" :visible.sync="surgeryUpdateVisible">
      <el-form :model="surgery">
        <el-form-item label="设备名">
          <el-input v-model="surgery.siName" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="设备价格">
          <el-input v-model="surgery.siPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="所属科室">
          <el-select v-model="surgery.siDepartmentId" placeholder="请选择所属科室">
            <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id" :label="tde.deName"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="surgeryUpdateVisible = false, surgery = {}">取 消</el-button>
        <el-button type="primary" @click="updateTokenSurgery">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      surgeryAddVisible: false,
      surgeryUpdateVisible: false,
      surgeryParm: {},
      surgery: {
      },
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tdeList: [],
    }
  },
  methods: {
    nextPage(val) {
      //用户点击下一页触发
      this.pageNum = val;
      this.querySurgery();
    },
    prevPage(val) {
      //用户点击上一页触发
      this.pageNum = val;
      this.querySurgery();
    },
    changeSize(val) {
      //改变每页显示的条数
      this.pageNum = 1;
      this.pageSize = val;
      this.querySurgery();
    },
    changeCurrent(val) {
      this.pageNum = val;
      this.querySurgery();
    },
    //搜索按钮
    queryCondition() {
      this.pageNum = 1;
      this.querySurgery();
    },
    //查询设备
    querySurgery() {
      let pageParm = {};
      pageParm.pageNum = this.pageNum;
      pageParm.pageSize = this.pageSize;
      pageParm.param = this.surgeryParm;

      this.$axios.post('api/surgery/querySurgery', pageParm)
        .then(res => {
          if (res.data.code === 200) {
            let parm = res.data.data;
            this.tableData = parm.list;
            this.total = parm.total;
          }
        })
    },
    //清空搜索条件
    remove() {
      this.surgeryParm = {};
      this.querySurgery(); // 添加这一行代码
    },
    //新增病房界面
    add() {
      this.surgeryAddVisible = true;
    },
    //添加设备
    addTokenSurgery() {
      this.$axios.post('api/surgery/addSurgery', this.surgery)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("添加成功");
            this.surgery = {};
            this.surgeryAddVisible = false;
            this.querySurgery();
          } else {
            this.$message.error("必选项为空");
          }
        })
    },
    //打开修改界面并传参
    upadtePage(id) {
      this.surgeryUpdateVisible = true;
      this.$axios.get('api/surgery/querySurgeryById/' + id)
        .then(res => {
          if (res.data.code === 200) {
            this.surgery = res.data.data;
          }
        })
    },

    //查询所有部门
    queryTde() {
      this.$axios.get('api/ward/queryTde')
        .then(res => {
          if (res.data.code === 200) {
            this.tdeList = res.data.data;
          }
        })
    },
    //获取部门方法名
    getDepartmentName(id) {
      return this.tdeList[id - 1].deName || "未知部门"
    },
    //修改病房
    updateTokenSurgery() {
      this.$axios.post('api/surgery/updateSurgery', this.surgery)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("修改成功");
            this.surger = {};
            this.surgeryUpdateVisible = false;
            this.querySurgery();
          } else {

            this.$message.error("必选项为空");

          }
        })
    },
    //删除设备
    deleteSurgery(id) {
      this.$confirm('此操作将永久删除该手术信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('api/surgery/deleteSurgeryManage/' + id)
          .then(res => {
            if (res.data.code === 200) {
              this.$message.success("删除成功");
              this.querySurgery();
            }
          })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  },
  created() {
    this.querySurgery();
    this.queryTde();
  }
}
</script>

<style scoped>
/* 全局字体和颜色 */
body {
  font-family: 'Roboto', sans-serif; /* 或者你可以选择其他的字体 */
  color: #333;
}
.el-button {
  border: none;
  box-shadow: 0 2px #888888;
}

/* 卡片样式和阴影效果 */
.el-card {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 调整输入框、按钮和选择框的圆角和边框颜色 */
.el-input, .el-button, .el-select-dropdown .el-scrollbar__view .el-select-dropdown__item, .el-select {
  border-radius: 4px;
}



.el-button:focus, .el-button:hover {
  opacity: 0.9;
  box-shadow: none;
}

/* 按钮悬停效果 */
.el-button--primary:hover {
  background-color: #5e72e4;
  border-color: #5e72e4;
}

.el-button--warning:hover {
  background-color: #fbc658;
  border-color: #fbc658;
}

.el-button--danger:hover {
  background-color: #f5365c;
  border-color: #f5365c;
}

/* 调整表格中图像的边距和边框 */
.el-table .cell img {
  border-radius: 4px;
  margin-right: 10px;
}

/* 分页器样式 */
.el-pagination {
  background-color: #fff;
  padding: 10px;
  box-shadow: 0px 2px 6px #eaedf3;
  border-radius: 8px;
}

/* 对话框的样式 */
.el-dialog__header {
  background-color: #f0f2f5;
  color: #333;
}

/* 图标样式 */
.el-icon {
  vertical-align: middle;
  margin-right: 4px;
}

/* 提示框样式 */
.el-message-box {
  border-radius: 8px;
}

/* 上传组件样式 */
.avatar-uploader .el-upload {
  border-radius: 4px; /* 更圆润的按钮 */
}

/* 更改选择区域样式 */
.el-form--inline .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}
</style>